<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- css中元素分为块元素和行内元素两大类 -->
    <!-- 块元素：
    1.比较霸道，自己独占一行
    2.高度，宽度，外边距，内边距，都可以控制.
    3.宽度默认是父级宽度
    4.是一个容器及盒子，里面可以放行内或者块级元素. -->

    <!-- 注意 文字类元素里不能放块级元素 比如 <p> <h>-->

    <!-- 
    行内元素特点：
    1.相邻的行内元素在一行上，一行可以显示多个。
    2.宽高直接设置是无效的。
    3.默认宽度就是他本身内容的宽度。
    4.行内元素只能容纳文本或者其他行内元素 -->

    <!-- 特殊：a里可以放块级元素 -->

    <!-- 行内块元素 img td input
    ①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
    ②默认宽度就是它本身内容的宽度（行内元素特点）。
    ③高度，行高、外边距以及内边距都可以控制（块级元素特点）。 -->
    <table border="1" cellspacing="0" cellpadding="5 ">
      <tr>
        <th>元素模式</th>
        <th>元素排列</th>
        <th>设置样式</th>
        <th>默认宽度</th>
        <th>包含</th>
      </tr>
      <tr>
        <td>块级元素</td>
        <td>一行只能放一个块元素</td>
        <td>可以设置宽度高度</td>
        <td>容器的100%</td>
        <td>可以包含任何标签</td>
      </tr>
      <tr>
        <td>行内元素</td>
        <td>一行可以放多个行内元素</td>
        <td>不可以直接设置宽度高度</td>
        <td>本身内容的宽度</td>
        <td>容纳文本或者其他行内元素</td>
      </tr>
      <tr>
        <td>行内块元素</td>
        <td>一行可以放多个行内块元素</td>
        <td>可以设置宽度高度</td>
        <td>本身内容的宽度</td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
